<template>
    <div id="home">
        <m-header @collapse='collapseChange'></m-header>
        <left-side :fadeshow='fadeshow'></left-side>
        <div class="content"  :class="{'toggle':fadeshow}">
            <tag></tag>
             <div class="content-box">
                <transition name="fade" mode="out-in">
                    <router-view></router-view>
                </transition>
             </div>
        </div>
    </div>
</template>

<script>
    import MHeader from 'components/header/header'
    import leftSide from 'components/leftSide/leftSide'
    import tag from 'components/tag/tag'
    export default {
        data(){
            return{
                fadeshow:false
            }
        },
        components:{
            MHeader,
            leftSide,
            tag
        },
        methods:{
           collapseChange(open){
             this.fadeshow=open;
           }
        }
    }
</script>

<style scoped>
    .content{
        background: none repeat scroll 0 0 #f0f3f4;
        position: absolute;
        left: 200px;
        right: 0;
        top: 66px;
        bottom:0;
        width: auto;
        
        box-sizing: border-box;
        overflow-y: scroll;
        overflow-x:hidden; 
        transition: left .3s ease-in-out;
    }
    .content-box{
       padding:6px 40px 25px 40px;
    }
    .toggle{
        left:65px;
    }
    .fade-enter-active{
      transition: ease-in-out 0.6s;
    }
    .fade-enter{
        opacity: 0;
        transform:translateX(50px);
    }
</style>